<template>
  <div class="jd-home" ref="home" @scroll="recordTop">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 搜索框 S -->
      <van-search
        show-action
        :placeholder='goodList'
        @click="onSkipToLists"
        disabled
        background="#C82519"
        shape="round"
      >
        <template #action>
          <div class="login" @click="onSkipToLogin">登录</div>
        </template>
        <template #label>
          <span class="jd"></span>
          <span class="line">|</span>
        </template>
        <template #left>
          <span class="left"></span>
        </template>
      </van-search>
      <!-- 搜索框 E -->

      <!-- 轮播图 S -->
      <Swipe/>
      <!-- 轮播图 E -->

      <!-- 轮播图盒子 S -->
      <SwipeBox/>
      <!-- 轮播图盒子 E -->

      <!-- 显示列表 S -->
      <div class="goods">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="200"
            :immediate-check='false'
        >
            <div class='list-row' v-for='row in rowLen' :key='row'>
              <GoodItem :goods="lists[2*row-2]"/>
              <GoodItem :goods="lists[2*row-1]"/>
            </div>
        </van-list>
      </div>
      <!-- 显示列表 E -->
      <Tabbar/>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Tabbar} from '@/components/';
import GoodItem from './components/GoodItem.vue'
import Swipe from './components/Swipe.vue'
import SwipeBox from './components/SwipeBox.vue'
import 
{ 
  Search,
  PullRefresh,
  List,
  Cell
} from 'vant';
export default {
  data() {
    return {
      searchList:[{id:1,label:'小米手机'},{id:2,label:'电视机'},{id:3,label:'ipone'},{id:4,label:'iPad'}],
      lists:[],
      refreshing: false,
      loading: false,
      finished: false,
      total:1,//总长度
      page:1,//传递的第几页
      top:0//记录滚动条到顶部的距离
    };
  },
  components: {
    [Search.name]:Search,
    [PullRefresh.name]:PullRefresh,
    [List.name]:List,
    [Cell.name]:Cell,
    Swipe,
    SwipeBox,
    GoodItem,
    Tabbar
  },
  created() {
    //初始化执行
    this.init()
  },
  watch:{
    page(){
      //每次page改变的时候，重新调一次接口
      this.init()
    }
  },
  computed: {
    goodList(){
      return this.searchList[parseInt(Math.random()*4)].label
    },
    rowLen(){
      // console.log(this.lists);
      //表示要遍历的行的长度
      return  Math.floor(this.lists.length/2)
    },
  },
  methods: {
    onSkipToLists(){
      console.log('跳转列表');
    },
    onSkipToLogin(){
      this.$router.push("/login")
    },
    //触底的时候执行
    onLoad() {
      console.log('接触底了');
      setTimeout(()=>{
            this.page++
        }, 1000)
    },
    //刷新的时候执行
    onRefresh() {
      console.log('准备刷新');
      setTimeout(()=>{
        this.init()//需要手动调用一次，因为page=1的时候，监听器里面的page不会改变,就不会执行init()
        this.page=1
      },1000)
    },
    init(){
      this.$http.fetchGoodLists(
        { 
          page:this.page,
          size:6
        }
      ).then(res=>{
        this.total=res.total
        console.log(this.page);
        if(this.page==1){
          this.lists=res.list
          this.refreshing=false//不变成false则会一直刷新状态
          this.finished=false
        }else{
          this.lists=[...this.lists,...res.list]
          this.loading = false
          // 表示数据库中已经没有数据了
          if(this.lists.length == this.total) this.finished = true
        }
      })
    },
    //记录滚动条距离顶部的距离
    recordTop(e){
      this.top=e.srcElement.scrollTop
    }
  },
  activated(){
    //由于动态组件只会保存组件和声明式变量,不会保存dom操作,这个地方我们就只能手动操作了.
    this.$refs.home.scrollTop=this.top
  }
};
</script>
<style lang="scss" scoped>
//搜索栏
.login{
  color: #fff;
}
.jd{
  width: .533333rem;
  height: .4rem;
  display: inline-block;
  background: url('../../assets/jd.png') no-repeat;
  background-size: 100% 100%;
  margin-right: .266667rem;
  vertical-align: middle;
}
.line{
  color: rgb(230, 230, 230);
  font-size: .426667rem;
}
.left{
  width: .533333rem;
  height: .48rem;
  margin-right: .266667rem;
  display: block;
  background: url('../../assets/three.png') no-repeat;
  background-size: 100% 100%;
}
//商品列表
.list-row {
	height: 6.933333rem;
	width: 100%;
	display: flex;
	font-size: .346667rem;
	color: #1a1a1a;
	background: rgba(247, 247, 247, 1);
}
.goods{
  padding-bottom: 1rem;
}
.van-search{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
//想要触发滚动条事件,必须是绝对定位并且设置了overflow:auto
.jd-home{
  padding-bottom: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 1.33rem;
	overflow-y: scroll;
}
</style>
